<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            
        }

        .background {
            position: absolute;
            height: 100%;
            width: 100%;
            background: url('./img/fighter.jpg');
            filter: blur(4px);
        }
        .title{
            background: url('./img/text-bg.png');
            font-family: Oswald,sans-serif;
            text-transform: uppercase;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip:text;
            position: absolute;
            top: 18%;
            width: 100%;
            text-align: center;
            line-height: 150px;
            font-size: 100px;
            font-weight: bold;
            color: #ebebdc;
            /* text-decoration: underline #ebebdc; */
        }
        .footer {
            position: absolute;
            bottom: 0;
            height: 400px;
            width: 100%;
            background: linear-gradient(transparent 0%,#000 98%);
        }
    </style>
</head>

<body>
    <div class="background"></div>
    <p class="title">THE World War II</p>
    <div class="footer"></div>
</body>

</html>